<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
		
	</head>

	<body >

		<style>
			.mui-control-content {
				background-color: white;
				min-height: 360px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.mui-bar-nav~.mui-content{
				padding-top: 200px;
			}
		</style>
		
		<header id="header" class="mui-bar mui-bar-nav" style="height:200px;background-image: url();background-size: 100% ;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:white;"></a>
			<a style="float:right;margin:10px;">
				<span class="mui-icon-extra mui-icon-extra-like " style="color:white;font-size: 16px;margin-right: 10px;"></span>
				<span class="focusOn" style="background-color: white;color: black;font-size: 12px;border-radius: 20px;padding:3px;">关注</span></a>
			
				
			<!--<h1 class="mui-title">顶部选项卡-可左右拖动(div)</h1>-->
		</header>
			
		<div class="mui-content">
			<div id="slider" class="mui-slider" style="background-color: white;">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
				作品介绍
			</a>
					<a class="mui-control-item" href="#item2mobile">
				选集
			</a>
					
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									
									<li id="introduction" class="mui-table-view-cell">
										<h5 style="margin-top: 25px;">故事简介</h5>
										<p id="storyContent"></p>
										<p>KroeaComics</p>
										<p style="margin-top: 15px;"><span style="font-size: 8px;color:white;border-radius: 500%;background-color: #2AC845;padding: 5px 2px;;">更新</span>
											<span style="color:#2AC845;">每周<span id="week"></span>定期更新</span></p>
									</li>
									
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								
								<ul id="anthologys" class="mui-table-view">
											
										</ul>
							</div>
						</div>

					</div>
					
				</div>
			</div>
			
		</div>
		<nav class="mui-bar mui-bar-tab">
				<a  class="mui-tab-item  update" href="tab-webview-subpage-about.html">
					<span class="mui-icon mui-icon-home"></span>
					<span class="mui-tab-label ">更新</span>
				</a>
				<a class="mui-tab-item discover" href="tab-webview-subpage-chat.html">
					<span class="mui-icon mui-icon-personadd"></span>
					<span class="mui-tab-label ">发现</span>
				</a>
				<a class="mui-tab-item mycomics" href="tab-webview-subpage-contact.html">
					<span class="mui-icon mui-icon-star-filled"></span>
					<span class="mui-tab-label ">我的漫画</span>
				</a>
				<a class="mui-tab-item my" href="tab-webview-subpage-setting.html">
					<span class="mui-icon mui-icon-contact"></span>
					<span class="mui-tab-label ">MY</span>
				</a>
			</nav>
		
		<script src="js/url.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script>
			/*
			 如果你要用jQuery必须将下面这行代码放在第一行，然后将$符号换成jQuery
			 * */
			
			$.noConflict();
			var id;
			var comicsName;
			
			mui.plusReady(function(){
				id=plus.webview.currentWebview().comicsid
	
			jQuery.ajax({
				type:'post',
				url: serverip.ip + '/comicsContent/contents',
				dataType:'json',
				data:{id:id},
				xhrFields: {
	            withCredentials: true
				    },
	            crossDomain: true,
	   			success:function(data){
	   				comicsName=data.comicsname;
	   				document.getElementById('storyContent').innerText=data.introduce;
	   				document.getElementById('week').innerText=data.week;
	   				jQuery("#header").css("background-image","url("+ serverip.ip2+id+'/'+data.icon   +")");
	   			}
				
			});
			
			})
			
			
			
			
			
			
			
			/*关注*/
			
			document.getElementsByClassName("focusOn")[0].addEventListener("tap",function(){
				jQuery.ajax({
					type:'post',
					url:serverip.ip+'/attentionVO/add',
		                 xhrFields: {
                      withCredentials: true
                      },
                     crossDomain: true,
                     data:{'cid':id},
                     dataType:'json',
					success:function(data){
						if(data==1){
							alert('关注成功')
						}else{
							mui.openWindow({
								url: 'login.html'
							})
						}
					}
				});
			});
		
		    
		   /*点赞*/
		   document.getElementsByClassName("mui-icon-extra-like")[0].addEventListener("tap",function(){
				
				jQuery.ajax({
					type:'post',
					url:serverip.ip+'/easylike/add',
		                 xhrFields: {
                      withCredentials: true
                      },
                      data:{'id':id},
                       dataType:'json',
                     crossDomain: true,
					success:function(data){
						
						if(data==1){
							
							alert('点赞成功')
						}
					}
				});
			});
		
		
		 
		</script>
		
		<script>
				document.getElementsByClassName("update")[0].addEventListener("tap", function() {
					mui.openWindow({
						url: "homePage.html"
					})
				});

				document.getElementsByClassName("discover")[0].addEventListener("tap", function() {
					mui.openWindow({
						url: "discover.html"
					})
				});

				document.getElementsByClassName("mycomics")[0].addEventListener("tap", function() {
					mui.openWindow({
						url: "myComics.html"
					})
				});

				document.getElementsByClassName("my")[0].addEventListener("tap", function() {
					mui.openWindow({
						url: "personalCenter.html"
					})
				});
			</script>
		
		
		<script>
			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
				/*var html2 = '<ul class="mui-table-view">'
								+'<li class="mui-table-view-cell" style="padding:0;height:70px;">'
								+'<div >'
								+'<div style="float:left;"><img src="img/logo.jpg" style="width:70px;height:70px;"/></div>'
								+'<div style="float:left;margin-left:10px;margin-top:4px;">'
		                    	+'<p class="many" style="font-size:12px;color:black;">第几话</p>'
		                    	+'<p style="font-size:10px;">2015年5月24日</p>'
		                   		+'<p ><span class="mui-icon-extra mui-icon-extra-like" style="font-size: 10px;margin-right: 10px;">'
		                   		+'<span style="margin-left:3px;">点赞数量</span></span></p>'
		                        +'</div>'
		                        +'<span style="float:right;line-height:70px;margin-right:20px;">#76</span>'
		                		+'</div>'
		                		+'</li>'

								+'</ul>';*/

				
				var item2 = document.getElementById('item2mobile');
				
				document.getElementById('slider').addEventListener('slide', function(e) {
					if (e.detail.slideNumber === 1) {
						if (item2.querySelector('.mui-scroll')) {
							setTimeout(function() {
								//item2.querySelector('.mui-scroll').innerHTML = html2;
							//盒子
							var ul = document.getElementById('anthologys');
							jQuery.ajax({
								 type:'post',
								 url: serverip.ip + '/chapter/comics',
								 dataType:'json',
								 data:{'comicsID':id},
								 success:function(data){
								 	ul.innerHTML=null;
								 	for(var i=0;i<data.length;i++){
								 		//内容 创建一个节点以放入盒子
								 		  var li = document.createElement('li');
								 		  li.classList.add('mui-table-view-cell');
								 		  li.style.padding=0;
								 		  li.style.height='70px';
								 		  li.innerHTML='<div class="quanji">'+'<div style="float:left">'+'<img src="'+serverip.ip2+data[i].cid+'/'+data[i].icon+'" style="width:70px;height:70px"/>'+'</div>'
								 		  +'<div style="float:left;margin-left:10px;margin-top:4px;">'
								 		  +'<p class="many" style="font-size:12px;color:black;">'+data[i].chapterName+'</p>'
								 		  +'<p style="font-size:10px">'+data[i].create_time+'</p>'
								 		  +'<p><span class="mui-icon-extra mui-icon-extra-like" style="font-size: 10px;margin-right: 10px;">'
								 		  +'<span style="margin-left:3px;">'+data[i].easyLike+'</span></span></p>'
								 		  +'</div>'+'<span style="float:right;line-height:70px;margin-right:20px;">'+data[i].chapterName+'</span>'+
								 		  '<div class="chapterid" style="display:none;">'+data[i].id+'</div>'+
								 		  '<div class="comicsid" style="display:none;">' + data[i].cid + '</div>'+
											'<div class="chapterName" style="display:none;">' + data[i].chapterName + '</div>'+
											'</div>';
								 		  
								 		ul.appendChild(li);
								 	}
								 	jQuery(".quanji").bind("tap",function(){
								 		var chapterid = jQuery(this).find('.chapterid:first').text();
											var comicsid = jQuery(this).find('.comicsid:first').text();
											var chapterName = jQuery(this).find('.chapterName:first').text();
								 		mui.openWindow({
								 			url:'/watchComics.html',
								 			extras:{
								 				'chapterid': chapterid,
													'comicsid':comicsid,
													'chapterName':chapterName,
								 				'comicsName':comicsName
								 			}
								 		}
								 			
								 		);
								 	});
								 	
								 }
								 
							});
				
				
							
							
							
							
							
							
							
							
							
							
							
							
							
							}, 500);
						}
					} 
				});
				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);
		</script>

	</body>

</html>
